<!--
 * @Author: Betty
 * @Date: 2020-11-20 22:38:09
 * @LastEditors: Betty
 * @LastEditTime: 2021-01-31 21:32:29
 * @Description: 专栏详情页
-->
<template>
  <div class="column-detail-page w-75 mx-auto">
    <!-- 上半部分，专栏信息 -->
    <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
      <div class="col-3 text-center">
        <img :src="column.avatar && column.avatar.fitUrl" :alt="column.title" class="rounded-circle border w-100" />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <!-- 下半部分，文章列表，使用了文章列表组件 -->
    <post-list :list="list"></post-list>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed, onMounted } from 'vue'
// 导入全局数据类型
// eslint-disable-next-line no-unused-vars
import { ColumnProps, GlobalDataProps } from '../store'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
// 导入文章列表组件
import PostList from '../components/PostList.vue'
import { addColumnAvatar } from '../helper'
export default defineComponent({
  name: '',
  components: {
    PostList
  },
  setup() {
    // 获取一下route对象，用它可以获取到路由信息
    const route = useRoute()
    // 获取id，现在我们的id是string类型，这里不需要转成number类型了
    const currentId = route.params.id
    // 使用store对象
    const store = useStore<GlobalDataProps>()
    // 在onMounted发请求，获取专栏的信息和对应的文章列表
    onMounted(() => {
      if (typeof currentId === 'string') {
        // 调用store对象的dispatch方法，触发一个action，第一个参数是那个action的名字
        // 第一个请求是获取当前专栏的数据
        store.dispatch('fetchColumn', currentId)
        // 第二个请求是获取当前专栏的文章列表
        store.dispatch('fetchPosts', currentId)
      }
    })
    // 根据id，找到对应的专栏是哪个
    // 把id作为getter的参数传入，并把结果作为计算属性的返回值
    const column = computed(() => {
      const selectColumn = store.getters.getColumnById(currentId) as ColumnProps | undefined
      // 在这里对专栏头图做了处理，处理用的是通用的方法
      if (selectColumn) {
        addColumnAvatar(selectColumn, 100, 100)
      }
      return selectColumn
    })
    // 拿到当前专栏的文章列表数据
    const list = computed(() => store.getters.getPostsByCid(currentId))
    return {
      // 把找到的专栏和文章列表返回出去
      column,
      list
    }
  }
})
</script>

<style>
</style>
